<template>
<div class="goods">
    <!-- hello -->

    <!-- 表格头 -->
    <div class="tableHeader">

        <el-input placeholder="请输入内容" class="search">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <span class="mr10"></span>
        <el-button type="success">添加商品</el-button>
        <el-button type="success">导出Excel<i class="el-icon-download"></i></el-button>
    </div>
    <!-- /表格头 -->

    <!-- 表格内容 -->
    <div class="tableContent">
        <el-table
            v-loading="loading"
            border
            :data="tableData"
            stripe
            style="width: 100%">

            <!-- 
                label 列名称
                width 列宽度
                prop  列填充数据（先不管等接口请求
             -->

            <el-table-column
                prop="goods_id"
                label="编号" width="50"  
                align="center">
            </el-table-column>

            <el-table-column
            prop="goods_name"
            label="商品名称"
            width="680">
            </el-table-column>

            <el-table-column label="商品价格" width="80" prop="goods_price" align="center">
            </el-table-column>

            <el-table-column label="是否上架" width="80" align="center">
                <template> 
                    <el-switch></el-switch>
                </template> 
            </el-table-column>

            <el-table-column label="是否推荐" width="80"  align="center">
                <template> 
                    <el-switch></el-switch>
                </template> 
            </el-table-column>

            <el-table-column label="是否热卖" width="80" align="center">
                <template> 
                    <el-switch></el-switch>
                </template> 
            </el-table-column>

            <el-table-column
            width="120" 
            fixed="right"
            label="操作">
                <template slot-scope="scope"> 
                <!-- scope.row 代表当前行数据 -->
                    <!-- <el-button @click="isShowEditTk = true" size="mini" type="danger" icon="el-icon-edit"></el-button> -->
                    <el-button @click="editFn(scope.row)" size="mini" type="danger" icon="el-icon-edit"></el-button>
                    <el-button @click="deleteFn(scope.row.goods_id)" size="mini" type="info" icon="el-icon-delete-solid"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- /表格内容 -->

    <!-- 表格分页 -->
    <div class="tablePage">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 100, 200, 300]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal">
        </el-pagination>
    </div>
    <!-- /表格分页 -->

    <!-- 其他 -->
    <el-dialog
    title="编辑商品"
    :visible.sync="isShowEditTk"
    width="30%"
    :before-close="handleClose">
    
        <el-form label-width="120px">
            <el-form-item label="商品名称">
                <el-input v-model="editFormData.goods_name"></el-input>
            </el-form-item>

            <el-form-item label="商品价格">
                <el-input v-model="editFormData.goods_price"></el-input>
            </el-form-item>

            <el-form-item label="商品数量">
                <el-input v-model="editFormData.goods_number"></el-input>
            </el-form-item>

            <el-form-item label="商品重量">
                <el-input v-model="editFormData.goods_weight"></el-input>
            </el-form-item>

            <el-form-item label="商品分类">
                  <el-cascader
                    :options="options"
                    v-model="selectedOptions"
                    @change="handleChange">
                </el-cascader>
            </el-form-item>
        </el-form>
        
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    
        <span slot="footer" class="dialog-footer">
            <el-button @click="isShowEditTk = false">取 消</el-button>
            <el-button type="primary" @click="isShowEditTk = false">确 定</el-button>
        </span>
    </el-dialog>
    <!-- /其他 -->
</div>
</template>
<script>
// 导入接口
// import  {getGoodsApi} from '@/api/index.js'
import  {getGoodsApi, deleteGoodsApi} from '@/api'

// 
export default {
    methods: {
      // 编辑
      editFn(row) {
          // add_time: 1586489001 cat_id: null cat_one_id: null
          // cat_three_id: null cat_two_id: null goods_id: 935
          // goods_name: "千锋刘德华"  goods_number: 1 goods_price: 10 goods_state: null
          // goods_weight: 90 hot_mumber: 0 is_promote: false upd_time: 1586489001
          // 1. 将数据同步到模块  -> 模型修改了同步到修改表单
        //   console.log(row)
          this.editFormData = {
              goods_name: row.goods_name,
              id: row.goods_id,
              goods_number: row.goods_number,
              goods_weight: row.goods_weight,
              goods_price: row.goods_price,
          }
          // 2. 显示弹框
          this.isShowEditTk = true
      },
      // 删除
      deleteFn(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
            // 后期会发送异步请求
            deleteGoodsApi(id)
            .then(res => {
                if (res.meta.status == 200)
                {
                    // 1提示 
                    this.$message.success('删除成功!');
                    // 2重新发送异步请求（因为删除成功页面就不需要那一条数据了
                    this.initData()
                } else {
                    this.$message.error('删除失败!');
                }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
        });
      },
      // 分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        // 1. 改变模型数据
        this.pagesize = val
        // 2. 重新发送异步请求
        this.initData()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        // 1. 改变模型数据
        this.pagenum = val
        // 2. 重新发送异步请求即可
        this.initData()
      },
      // 弹框
      handleChange(value) {
        console.log(value);
      },
      handleClose() {
        //   console.log('this is clode')
        this.isShowEditTk = false
      },
      // 上传图片
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 初始化列表数据
      initData() {
          getGoodsApi({
              pagesize: this.pagesize,
              pagenum: this.pagenum,
              query: this.query,
          }) 
          .then(res => {
              // console.log(res)
              // 数据同步到模型，模型改变同步到视图
              this.tableData = res.data.goods
              this.tableDataTotal = res.data.total
          })
      }
    },
    // 钩子函数
    created() {
        this.initData()
    },
    // 声明模型数据
    data() {
        return {
            // 编辑弹框数据
            editFormData : {
                goods_name: '',
                id:'',
                goods_number:'',
                goods_weight: '',
                goods_price: '',
            },
            // 表格数据
            isShowEditTk: false,
            pagesize: 5,
            pagenum: 1,
            query: '',
            tableDataTotal: 0, // 总数据
            // 表格page
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            // 表格loading
            loading: false,
            // 表格数据
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            // 联级选择器数据
            options: [
                {
            value: 'zhinan',
            label: '指南',
            children: [{
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                value: 'yizhi',
                label: '一致'
                }, {
                value: 'fankui',
                label: '反馈'
                }, {
                value: 'xiaolv',
                label: '效率'
                }, {
                value: 'kekong',
                label: '可控'
                }]
            }, {
                value: 'daohang',
                label: '导航',
                children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
                }, {
                value: 'dingbudaohang',
                label: '顶部导航'
                }]
            }]
            }, {
            value: 'zujian',
            label: '组件',
            children: [{
                value: 'basic',
                label: 'Basic',
                children: [{
                value: 'layout',
                label: 'Layout 布局'
                }, {
                value: 'color',
                label: 'Color 色彩'
                }, {
                value: 'typography',
                label: 'Typography 字体'
                }, {
                value: 'icon',
                label: 'Icon 图标'
                }, {
                value: 'button',
                label: 'Button 按钮'
                }]
            }, {
                value: 'form',
                label: 'Form',
                children: [{
                value: 'radio',
                label: 'Radio 单选框'
                }, {
                value: 'checkbox',
                label: 'Checkbox 多选框'
                }, {
                value: 'input',
                label: 'Input 输入框'
                }, {
                value: 'input-number',
                label: 'InputNumber 计数器'
                }, {
                value: 'select',
                label: 'Select 选择器'
                }, {
                value: 'cascader',
                label: 'Cascader 级联选择器'
                }, {
                value: 'switch',
                label: 'Switch 开关'
                }, {
                value: 'slider',
                label: 'Slider 滑块'
                }, {
                value: 'time-picker',
                label: 'TimePicker 时间选择器'
                }, {
                value: 'date-picker',
                label: 'DatePicker 日期选择器'
                }, {
                value: 'datetime-picker',
                label: 'DateTimePicker 日期时间选择器'
                }, {
                value: 'upload',
                label: 'Upload 上传'
                }, {
                value: 'rate',
                label: 'Rate 评分'
                }, {
                value: 'form',
                label: 'Form 表单'
                }]
            }, {
                value: 'data',
                label: 'Data',
                children: [{
                value: 'table',
                label: 'Table 表格'
                }, {
                value: 'tag',
                label: 'Tag 标签'
                }, {
                value: 'progress',
                label: 'Progress 进度条'
                }, {
                value: 'tree',
                label: 'Tree 树形控件'
                }, {
                value: 'pagination',
                label: 'Pagination 分页'
                }, {
                value: 'badge',
                label: 'Badge 标记'
                }]
            }, {
                value: 'notice',
                label: 'Notice',
                children: [{
                value: 'alert',
                label: 'Alert 警告'
                }, {
                value: 'loading',
                label: 'Loading 加载'
                }, {
                value: 'message',
                label: 'Message 消息提示'
                }, {
                value: 'message-box',
                label: 'MessageBox 弹框'
                }, {
                value: 'notification',
                label: 'Notification 通知'
                }]
            }, {
                value: 'navigation',
                label: 'Navigation',
                children: [{
                value: 'menu',
                label: 'NavMenu 导航菜单'
                }, {
                value: 'tabs',
                label: 'Tabs 标签页'
                }, {
                value: 'breadcrumb',
                label: 'Breadcrumb 面包屑'
                }, {
                value: 'dropdown',
                label: 'Dropdown 下拉菜单'
                }, {
                value: 'steps',
                label: 'Steps 步骤条'
                }]
            }, {
                value: 'others',
                label: 'Others',
                children: [{
                value: 'dialog',
                label: 'Dialog 对话框'
                }, {
                value: 'tooltip',
                label: 'Tooltip 文字提示'
                }, {
                value: 'popover',
                label: 'Popover 弹出框'
                }, {
                value: 'card',
                label: 'Card 卡片'
                }, {
                value: 'carousel',
                label: 'Carousel 走马灯'
                }, {
                value: 'collapse',
                label: 'Collapse 折叠面板'
                }]
            }]
            }, {
            value: 'ziyuan',
            label: '资源',
            children: [{
                value: 'axure',
                label: 'Axure Components'
            }, {
                value: 'sketch',
                label: 'Sketch Templates'
            }, {
                value: 'jiaohu',
                label: '组件交互文档'
            }]
            }],
            selectedOptions: [],
            selectedOptions2: [],
            // 联级选择器结束

            // 上传图片
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
        }
    }
}
</script>
<style lang="scss" scoped>
// goods
.goods {
    width: 96%;
    margin: auto;

    // tableHeader
    .tableHeader {
        width:100%;
        padding:10px 0px;
        background: #fff;

        // search
        .search {width: 300px;}
    }

    // tableContent
    .tableContent { margin: 10px 0px;  }
    // tablePage
    .tablePage {
        width: 100%;
        padding: 10px 0px;
        background: #fff;
    }
}
</style>